<!-- uniapp vue2 markdown解析 -->
<template>
  <view class="ua__markdown">
    <mp-html
        :content="parsedNodes"
             :markdown="true"
        :container-style="'line-height: 1.5;width:100%;overflow-x:hidden'"
        :show-img-menu="false"
        :selectable="false"
        :scroll-table="true"
        :use-anchor="true"
        :set-title="false"
        :copy-link="false"
        :preview-img="false"
        :lazy-load="false"
        :pause-video="false"
        :tag-style="tagStyle"
    />
  </view>
</template>

<script>
import mpHtml from '@/uni_modules/mp-html/components/mp-html/mp-html.vue'
import './katex.min.css'

export default {
  components: {
    mpHtml
  },
  props: {
    source: String,
    showLine: {type: [Boolean, String], default: true}
  },
  data() {
    return {
      markdown: null,
      copyCodeData: [],
      parsedNodes: '',
      tagStyle: {
        // 更广泛地应用样式到包含katex的div
        'div': 'width: 100%',
        // 尝试多种可能的选择器
        '.katex-display': 'width: 100%; display: block; margin: 1em 0; text-align: center;',
        'div.katex-display': 'width: 100%; display: block; margin: 1em 0; text-align: center;',
        '.katex': 'white-space: normal;'
      }
    }
  },
  watch: {
    source: {
      handler(newVal) {
        // 在小程序中，我们需要手动处理 katex-display 元素，为其添加 scroll-view 包装
        if (newVal) {
          this.parsedNodes = newVal;
        }
      },
      immediate: true
    }
  },
  mounted() {
    if (this.source) {
      this.parsedNodes = this.source;
    }
    // 字体加载已移到 main.js 中全局处理，此处不再需要加载
  }
}
</script>
<style lang="scss">
.ua__markdown {
  /* 设置容器不允许横向滚动 */
  overflow-x: hidden !important;
  width: 100%;
}

/* 小程序中使用 scroll-view 包装的 Katex 公式样式 */
.katex-display-scroll {
  width: 100%;
  white-space: nowrap;
  display: block;
  margin: 1em 0;
}

.katex-display-inner {
  display: inline-block;
  text-align: center;
  white-space: nowrap;
  padding: 0.5em 0;
}

/* 兼容之前的样式 */
.katex-display {
  display: block;
  margin: 1em 0;
  text-align: center;
  overflow-x: scroll !important;
  width: 100%;
  overflow-x: auto;
  white-space: nowrap;
}

.katex {
  white-space: normal;
}
</style>